
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>柳俊廷的博客</title>
    <style type="text/css">
        body
        {
            background-image:url("背景.jpg");
        }
        body {
            margin-top: 10px;
        }
        #z {
            
            background-size:  1249px auto;
            height: 199px;
            width: 1250px;
            margin: 0px auto;
        }
        .a2 {
            list-style-type: none;
            width: 1210px;
            height: 41px;
            margin: 0 auto;
            color: #FF6767;
            padding-top: 10px;
            background-color: #333333;
        }
        .a3 {
            list-style-type: none;
            width: 100%;
            height: 50px;
            padding-top: 12px;
            margin: 0 auto;
            background-color: #333333;
        }
        .a3 li {
            display: inline;
        }
        .a5 {
            color: #FF6767;
            margin-left: 153px;
        }
        .a6 {
            color: #FF6767;
            float: left;
            margin-left: 329px;
            margin-top:-245px ;
        }
        .a7 {
            color: #FF6767;
            float: left;
            margin-left: 483px;
            margin-top:-245px ;
        }
        .a8 {
            color: white;
            float: left;
            margin-left: 623px;
            margin-top:-245px ;
        }
        .a9 {
            color: white;
            float: right;
            margin-right: 28px;
            margin-top:-234px ;
        }
        a:hover {color:orange;}
        #a18 a:visited {color:#00F900;}
        #l1 {
            float: left;
            margin-left: -24px;
            margin-top: 52px;
        }
        #l2 {
            float: left;
            margin-left: -520px;
            margin-top: 140px;
            padding-bottom: 50px;
        }
        a { text-decoration: none;
            color: #FF6767;}
        #a3 {
            word-wrap: break-word;
            width: 32px;
            height: 34px;
            background-color:#333333 ;

            margin: -56px;
            overflow: hidden;
            text-align: center;
            padding: -3px;
            line-height: 30px;
            margin-left: 730px;
            margin-top: -54px;
        }
        #a3:hover {
           cursor: pointer;
            height: 14px;
            
        }
        
        #a3 span:hover {
            color: white;
        }
        #a4 {
            margin-left: 105px;
        }
        #a5 {
            margin-left: 804px;
           margin-top: -38px;
            float: left;
        }
        #a6 {
            height: 27px;
            width: 1248px;
            margin-top: 137px;
            opacity: 0.5;
        }
        #a7 {
            text-align: center;
            color: red;
            margin-top: -18px;
            word-spacing: 40px;
        }
        #a8 {
            position: absolute;
            left: 243px;
            top: 63px;
        }
        #a10 {
            float: left;
            margin-right: 119px;
            margin-top: -124px;
            text-align: center;
        }
        #a11 {
            float: right;
            margin-right: 1px;
            margin-top: -148px;
        }
        #a12 {
            width:259px;
            height: 300px;
            float: left;
            margin-left: 67px;
            margin-top: 37px;
        }
        #a13 {
            width:615px;
            height: 600px;
            float: left;
            margin-left: 9px;
            margin-top: 37px;
        }
        .a4>div:nth-child(odd) {
            background-color:#F1F1F1 ;
            font-weight: bold;
        }
        .a4>div:nth-child(even) {
            line-height: 70px;
            text-indent: 1em;
            color: #B2B2B2;
        }
        #a14 {
            float: right;
            margin-left: -13px;
        }
        #a15 {
            text-indent: 1em;
            float: left;
            padding-bottom: 40px;
            margin-left: 8px;
            margin-top: 60px;
            color: #B2B2B2;
        }
        #a16 {
            width:227px;
            height: 400px;
            float: left;
            margin-left: 9px;
            margin-top: 37px;
        }
        #a17 {
            width: 1249px;
            height: 250px;
            float: left;
            margin-left: 0px;
            margin-top: 50px;
            background-color:#333333;
        }
        #a18 {
            text-align: center;
            color: white;
            
            margin-top: -33px;
            margin-left: -216px;
            word-spacing: 11px;
        }
        
        
    </style>

</head>
<body>
<div id="z" >
    <div class="a1">
        <a id="a4"><img src="3.jfif" width="200px" height="90px"></a>
        <div id="a18">
            <ul class="a3">
                <a href="https://www.baidu.com/">搜索</a>
                <a href="https://www.baidu.com/">发现</a>
                <a href="https://www.baidu.com/">关注</a>
                <a href="https://www.baidu.com/">收藏</a>
                <a href="https://www.baidu.com/">关于</a>
                <a href="https://www.baidu.com/">客服</a>
                <a href="https://www.baidu.com/">反馈</a>
                <a href="https://www.baidu.com/">设置</a>
            </ul>
        </div>
       
    </div> 
    <div id="a6">
        <div id="a7">
            <ul class="a2">
                <a href="https://www.baidu.com/">博客首页</a>
                <a href="https://www.baidu.com/">笔记</a>
                <a href="https://www.baidu.com/">图库</a>
                <a href="https://www.baidu.com/">话题</a>
                <a href="https://www.baidu.com/">留言板</a>
                <a href="https://www.baidu.com/">动态</a>
                <a href="https://www.baidu.com/">个人资料</a>
            </ul>
        </div>
    </div>
   
    
    <a id="a10"><img src="4.jpg" width="150px" height="100px"></a>
    
    <a id="a11"><img src="1.jfif" width="150px" height="100px"></a>
    <div id="a12">
        <div class="a4">
            <div>圈子</div>
            <div>我的圈子<a href="https://www.baidu.com/">去看看</a></div>
            <div><a href="https://www.baidu.com/">动态</a></div>
            <div>现在还没有动态</div>
            <div>最近访客</div>
            <div>现在还没有访客，<a href="https://www.baidu.com/">去看看</a></div>
        </div>
    </div>
    <div id="a13">
        <div class="a4">
            <div>笔记</div>
            <div>现在还没有笔记，<a href="https://www.baidu.com/">发布笔记</a></div>
            <div>话题</div>
            <form>
                <select name="box1" multiple size="4">
                    <option value="1">新闻</option>
                    <option value="2">电影</option>
                    <option value="3">书籍</option>
                    <option value="4">科普</option>
                    <option value="5">人文</option>
                    <option value="6">娱乐</option>
                    <option value="7">电竞</option>
                    <option value="8">体育</option>
        </select><br/>
            </form>
            <div>现在还没有话题，<a href="https://www.baidu.com/">发布话题</a></div>
            <div>个人资料<a style="float: right" corlor="#B2B2B2">编辑我的资料</a></div>
            <div>
                <form>
                    <input type="radio" name="radio1" value="男">男
                    <input type="radio" name="radio1" value="男">女<br/>
                    <input type="radio" name="年龄" value="青年">青年
                    <input type="radio" name="年龄" value="中年">中年
                    <input type="radio" name="年龄" value="老年">老年<br/>
                </form>
            <div style="border: 1px dotted #B2B2B2" width="615"><a href="https://www.baidu.com/" style="float: right" corlor="#B2B2B2">查看全部个人资料</a></div><br/></div>
            <div>留言板<a style="float: right" corlor="#B2B2B2">全部</a></div>

            
            
            <textarea rows="3px" cols="60px" id="l1">写点什么吧</textarea>
            <input type="button" id="l2" value="留言"/><br/>
            <p id="a15">现在还没有留言</p>
        </div>
    </div>
    <div id="a16">
        <div class="a4">
            <div><a href="https://www.baidu.com/">好友</a></div>
            <div><a href="https://www.baidu.com/">我的好友标签</a><br/><a href="#">查找好友</a>或<a href="#">邀请好友</a></div>
            <div><a href="https://www.baidu.com/">我的空间</div><br/>
            <div>我的空间还没有内容</div>
            <br/>
            <div id="a14"><img src="6.jpg" width="150px" height="150px"></div>
        </div>
    </div>
    <div id="a17">
        <div class="a5">
            <p style="font-weight: bold">微博</p>
            <p><a href="https://www.baidu.com/">关于我们</a></p>
            <p><a href="https://www.baidu.com/">注册协议</a></p>
            <p><a href="https://www.baidu.com/">版权隐私</a></p>
            <p><a href="https://www.baidu.com/">免责申明</a></p>
        </div>
        <div class="a6">
            <p style="font-weight: bold">商务</p>
            <p><a href="https://www.baidu.com/">广告推广</a></p>
            <p><a href="https://www.baidu.com/">招聘服务</a></p>
        </div>
        <div class="a7">
            <p style="font-weight: bold">微博</p>
            <p ><a href="https://www.baidu.com/">腾讯微博</a></p>
            <p><a href="https://www.baidu.com/">新浪微博</a></p>
        </div>
        <div class="a8">
            <p style="font-weight: bold"><a href="https://www.baidu.com/">合作伙伴</a></p>
            <p><img src="2.jfif" width="270px" height="150px"></p>
        </div>
        
    </div>
</div>
</body>
</html>